<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
    let data = {a: 1};
    let app = new Vue({
        el: '#app'
        , data: data
    })

    //true
    console.log(app.a === data.a);

    //333
    app.a = 333;
    console.log(data.a);

    //2
    data.a = 2;
    console.log(app.a);

    //不会同时修改 vue实实例里的
    app.b = 'hi'


</script>

<div id="app-1">
    <p>{{ foo }}</p>
    <button v-on:click="foo = 'baz'">change</button>
</div>
<script>

    let obj = {
        foo: 'bar'
    };

    //Object.freeze() => 冻结对象：其他代码不能删除或更改任何属性。
    Object.freeze(obj);
    new Vue({
        el: '#app-1'
        , data: obj
    })
</script>

<div id="app-2"></div>
<script>
    let app2 = new Vue({
        data: {a: 1}
        // can not use this
        // , created: ()=> {
        //     console.log('a is:' + this.a);
        // }
        , created: function () {
            console.log('a is:' + this.a);
        }
        , mounted: () => {
        }
        , updated: () => {
        }
        , destroyed: () => {
        }
    })
</script>

</body>
</html>